<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <style></style>
</head>
<body>
  <h1>用户注册</h1>
  <hr>
  <input type="text" placeholder="用户的名字" id="username"><br>
  <input type="text" placeholder="手机号" id="userphone"><br>
  <input type="text" placeholder="会员1，非会员0" id="usermember"><br>
  <button id="btn">注册</button>
  <a href="./modify.html">跳转到个人修改界面</a>
  <script>
    //获取元素
    var username = document.getElementById('username');
    var userphone = document.getElementById('userphone');
    var usermember = document.getElementById('usermember');
    var btn = document.getElementById('btn');
    //点击事件
    btn.onclick = function(){
      //获取数据
      var unameval = username.value.trim();
      var uphoneval = userphone.value.trim();
      var umemberval = usermember.value.trim();
      if(unameval && uphoneval && umemberval){
        ajax(unameval,uphoneval,umemberval);
      }else{
        alert('输入的内容不能为空')
      }    
    }
    function ajax(n,p,m){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
          if(xhr.status>=200&&xhr.status<300){
            console.log(xhr.responseText)
            var result = JSON.parse(xhr.responseText)
            if(result.code==1){
              alert(result.msg)
              //给所有输入框的value重新赋值为空字符串的方法来覆盖原来用户输入的数据
              unameval='';
              uphoneval='';
              umemberval='';
            }
          }
        }
      }
      xhr.open('post','/user/add',true)
      //post请求必须写请求头
      xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      xhr.send(`u_names=${n}&u_phone=${p}&u_member=${m}`);
    }
  </script>
</body>
</html>